<html>
    <head>
        <title>Table Free-网络设置</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" media="all" href="common.css"></link>
    </head>
    <body>
        <div class="fr-fullscreen">
            <div class="fr-admin-top">
                <span class="fr-col-3 fr-align-center fr-vlign-middle"><img height="80%" src="logo.png"></span>
                <span class="fr-col-9 fr-align-center fr-txt-bold-32 fr-vlign-top headline">Table Free管理系统</span>
                <span class="fr-menu"></span>
            </div>
            <div class="fr-admin-middle">
                <div class="fr-admin-menu">
                    <ul>
                        <li class="active"><a href="javascript:;">网络配置</a></li>
                        <li><a href="user.html">用户管理</a></li>
                        <li><a href="control.html">控制端口设置</a></li>
                        <li><a href="upgrade.html">系统升级</a></li>
                        <li><a href="manual.html">使用说明书</a></li>
                    </ul>
                </div>
                <div class="fr-admin-main">
                    <div class="fr-admin-user-control fr-align-center">
                        <div class="fr-col-8 fr-tab-item fr-row-margin10" id="network">
                            <fieldset class="fr-section">
                                <legend class="fr-align-left">
                                    <label><input type="radio" name="nettype" value="1" /> 静态IP
                                    </label>
                                </legend>
                                <div class="fr-row fr-row-margin10">
                                    <span class="fr-col-2 fr-align-right">
                                        <label>
                                            IP地址：
                                        </label>
                                    </span>
                                    <span class="fr-col-4 fr-align-left">
                                        <input type="text" value="" name="ip" />
                                    </span>
                                </div>
                                <div class="fr-row fr-row-margin10">
                                    <span class="fr-col-2 fr-align-right">网关：</span>
                                    <span class="fr-col-4 fr-align-left">
                                        <input type="text" value="" name="gateway" />
                                    </span>
                                </div>
                                <div class="fr-row fr-row-margin10">
                                    <span class="fr-col-2 fr-align-right">子网掩码：</span>
                                    <span class="fr-col-4 fr-align-left">
                                        <input type="text" value="" name="netmask" />
                                    </span>
                                </div>
                                <div class="fr-row fr-row-margin10">
                                    <span class="fr-col-2 fr-align-right">DNS：</span>
                                    <span class="fr-col-4 fr-align-left">
                                        <input type="text" value="" name="dns" />
                                    </span>
                                </div>
                            </fieldset>
                            <fieldset class="fr-section fr-row-margin10">
                                <legend class="fr-align-left">
                                    <label><input type="radio" name="nettype" value="2" /> DHCP
                                    </label>
                                </legend>
                            </fieldset>
                            <div class="fr-row fr-row-margin10 fr-col-4">
                                <span class="fr-btn fr-btn-blue" id="saveipbtn">保存设置</span>
                                <a href="" class="fr-btn fr-btn-gray">刷新页面</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fr-clear"></div>
            </div>
            <div class="fr-admin-bottom fr-align-center" id="status_bar">
                <span class="fr-col-3"><i class="fa"></i> <span id="status_ip">IP:</span></span>
                <span class="fr-col-2"><i class="fa"></i> <span id="status_text">Online</span></span></span>
                <span class="fr-col-2"><i class="fa"></i> <span id="status_username"></span></span>
                <span class="fr-col-3"><i class="fa"></i> <span id="status_time"></span></span>
            </div>
        </div>
        
        <script type="text/javascript" src="jquery.1.11.3.mini.js"></script>
        <script type="text/javascript" src="common.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //绑定保存按钮事件
                $('#saveipbtn').on('click', function(){
                    var data = {dhcp:0};
                    $(':radio[name=nettype]').each(function(){
                        if($(this).is(":checked")){
                            data.dhcp = $(this).val() - 1;
                        }
                    });
                    if(data.dhcp == 0){
                        data.ip      = $('input[name=ip]').val();
                        data.gateway = $('input[name=gateway]').val();
                        data.netmask = $('input[name=netmask]').val();
                        data.dns     = $('input[name=dns]').val();
                        if(data.ip.length == 0 || !/^\d{1,3}(\.\d{1,3}){3}$/.test(data.ip)){
                            return popup.toast('请输入合法的IP地址')
                        }
                        if(data.gateway.length == 0 || !/^\d{1,3}(\.\d{1,3}){3}$/.test(data.gateway)){
                            return popup.toast('请输入合法的网关地址')
                        }
                        if(data.netmask.length == 0 || !/^\d{1,3}(\.\d{1,3}){2}\.0$/.test(data.netmask)){
                            return popup.toast('请输入合法的子网掩码')
                        }
                        if(data.dns.length == 0 || !/^\d{1,3}(\.\d{1,3}){3}$/.test(data.dns)){
                            return popup.toast('请输入合法的DNS')
                        }
                    }
                    request('/network.cgi', data, 'post', function(){
                        popup.toast("数据保存成功");
                    })
                })
                var init = {
                    network: function(){
                        request('/network.cgi?index=0', null ,'get', function(data){
                            $(':radio[name=nettype]').each(function(){
                                var ipvalue = data.dhcp > 0 ? 2 : 1;
                                if($(this).val() == ipvalue){
                                    $(this).prop('checked', true);
                                }
                            })
                            //静态IP
                            if(data.dhcp == 0){
                                $('input[name=ip]').val(data.ip);
                                $('input[name=gateway]').val(data.gateway);
                                $('input[name=netmask]').val(data.netmask);
                                $('input[name=dns]').val(data.dns);
                            }
                        })
                    }
                };

                for(var i in init){
                    init[i].call(null);
                }
            })
        </script>
    </body>
    </html>